<template>
    <el-form ref="formRef" @submit.prevent="handleSubmit" :model="form" :rules="rules" class="comment-form">
      <el-form-item prop="guest_name">
        <el-input
            v-model="form.guest_name"
            placeholder="请输入昵称"
            clearable
            maxlength="50"
        >
          <template #prepend>
            <el-icon><User /></el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item prop="guest_email">
            <el-input
                v-model="form.guest_email"
                placeholder="请输入邮箱（可选）"
                clearable
                type="email"
            >
              <template #prepend>
                <el-icon><Message /></el-icon>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="guest_phone">
            <el-input
                v-model="form.guest_phone"
                placeholder="请输入手机号（可选）"
                clearable
                maxlength="20"
            >
              <template #prepend>
                <el-icon><Phone /></el-icon>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item prop="content">
        <el-input
            type="textarea"
            v-model="form.content"
            placeholder="请输入留言内容"
            :rows="4"
            maxlength="500"
            show-word-limit
        />
      </el-form-item>
      <el-form-item class="form-actions">
        <el-button type="primary" native-type="submit" :loading="loading">
          {{ parentId ? '回复' : '提交' }}
        </el-button>
        <el-button v-if="parentId" @click="emitCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </template>
  
  <script setup>
  import { ref, reactive } from 'vue';
  import { ElMessage } from 'element-plus';
  import { User, Message, Phone } from '@element-plus/icons-vue';
  
  const props = defineProps({
    parentId: { type: Number, default: null },
  });
  
  const emit = defineEmits(['submit', 'cancel']);
  const formRef = ref(null);
  const loading = ref(false);
  
  const form = reactive({
    guest_name: '',
    guest_email: '',
    guest_phone: '',
    content: '',
  });
  
  const rules = reactive({
    guest_name: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
    guest_email: [{ type: 'email', message: '请输入有效邮箱', trigger: 'blur' }],
    guest_phone: [{ pattern: /^\d{0,20}$/, message: '请输入有效手机号', trigger: 'blur' }],
    content: [{ required: true, message: '请输入留言内容', trigger: 'blur' }],
  });
  
  const handleSubmit = async () => {
    try {
      await formRef.value.validate();
      loading.value = true;
      emit('submit', { ...form, parent_id: props.parentId });
      formRef.value.resetFields();
    } catch (err) {
      ElMessage.warning('请检查输入内容');
    } finally {
      loading.value = false;
    }
  };
  
  const emitCancel = () => {
    formRef.value.resetFields();
    emit('cancel');
  };
  </script>
  
  <style scoped lang="scss">
  .comment-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  :deep(.el-input__wrapper) {
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
  }
  
  :deep(.el-input__inner) {
    font-size: 15px;
    color: #1e293b;
  }
  
  :deep(.el-textarea__inner) {
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    font-size: 15px;
    color: #1e293b;
  }
  
  :deep(.el-input__wrapper.is-focus),
  :deep(.el-textarea__inner:focus) {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
  }
  
  .form-actions {
    display: flex;
    gap: 8px;
  }
  
  .el-button--primary {
    background: #2563eb;
    border-color: #2563eb;
    border-radius: 6px;
    &:hover {
      background: #1d4ed8;
      border-color: #1d4ed8;
      transform: scale(1.02);
    }
  }
  
  .el-button:not(.el-button--primary) {
    border-radius: 6px;
  }
  </style>